<!DOCTYPE html>
<html>

<head>
  <title>响应式辅助类</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    table {
      margin: 8px;
    }

    th,
    td {
      text-align: center;
      padding: 1em;
      color: #333;
    }

    td:hover {
      background-color: #eee;
    }

  </style>
</head>

<body>
  <h2>推荐使用的类</h2>
  <table border="1">
    <tr>
      <th>xs &lt; 640</th>
      <th>640 ≤ sm &lt; 959</th>
      <th>960 ≤ md &lt; 1279</th>
      <th>1280 ≤ lg</th>
    </tr>
    <tr>
      <td>.On-xs()</td>
      <td colspan="3">.Bigger-then-xs()</td>
    </tr>
    <tr>
      <td>.Small-then-sm()</td>
      <td>.On-sm()</td>
      <td colspan="2">.Bigger-then-sm()</td>
    </tr>
    <tr>
      <td colspan="2">.Small-then-md()</td>
      <td>.On-md()</td>
      <td>.Bigger-then-md()</td>
    </tr>
    <tr>
      <td colspan="3">.Small-then-lg()</td>
      <td>.On-lg()</td>
    </tr>
  </table>
  <table border="1">
    <tr>
      <th>类名</th>
      <th>xs &lt; 640</th>
      <th>640 ≤ sm &lt; 959</th>
      <th>960 ≤ md &lt; 1279</th>
      <th>1280 ≤ lg</th>
    </tr>
    <tr>
      <td title="当视口在 md 及以上尺寸时隐藏">.hidden-md-and-up</td>
      <td colspan="2">显示</td>
      <td colspan="2">隐藏</td>
    </tr>
    <tr>
      <td title="当视口在 sm 及以下尺寸时隐藏">.hidden-sm-and-down</td>
      <td colspan="2">隐藏</td>
      <td colspan="2">显示</td>
    </tr>
    <tr>
      <td>.lg-only</td>
      <td colspan="3">隐藏</td>
      <td>显示</td>
    </tr>
    <tr>
      <td>.md-only</td>
      <td colspan="2">隐藏</td>
      <td>显示</td>
      <td>隐藏</td>
    </tr>
    <tr>
      <td>.sm-only</td>
      <td>隐藏</td>
      <td>显示</td>
      <td colspan="2">隐藏</td>
    </tr>
    <tr>
      <td>.xs-only(取代原先的m-only)</td>
      <td>显示</td>
      <td colspan="3">隐藏</td>
    </tr>

    <tr>
      <td>.hidden-in-xs(取代原先的pc-only)</td>
      <td>隐藏</td>
      <td colspan="3">显示</td>
    </tr>
  </table>
  <h2>还存在但是不太推荐使用的类名</h2>
  <table border="1">
    <tr>
      <th>类名</th>
      <th>m(≤640)</th>
      <th>pc(≥641)</th>
    </tr>
    <tr>
      <td>--</td>
      <td>.on-m()</td>
      <td>.on-pc()</td>
    </tr>
    <tr>
      <td>.pc-only</td>
      <td>隐藏</td>
      <td>显示</td>
    </tr>
    <tr>
      <td>.m-only</td>
      <td>显示</td>
      <td>隐藏</td>
    </tr>
  </table>
</body>

</html>
